$(function() {
    var SoLuongSD =0;
    $("#Chart1").highcharts( {
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false
        },

        title: {
            text: 'Biểu đồ thống kê số lượng các tài sản có trong phòng'
        },
        tooltip: {
            formatter: function() {  return '<b>' + this.point.name + ': </b>'
                + parseInt((this.point.percentage)*SoLuongSD/100) + ' cái.';
            }
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    color: '#000000',
                    connectorColor: '#000000',
                    format: '<b>{point.name}</b>: {point.percentage:.1f} %'
                }
            }
        },
        series: [{
            type: 'pie',
            data: []
        }]
    });
    $("#Chart2").highcharts( {
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false
        },
        // exporting: {
        //     enabled: true,
        // },
        title: {
            text: 'Biểu đồ tình trạng sử dụng tài sản trong phòng'
        },
        tooltip: {
            formatter: function() {  return '<b>' + this.series.name + ': </b>'
                + parseInt((this.point.percentage)*SoLuongSD/100) + ' cái.';
            }
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    color: '#000000',
                    connectorColor: '#000000',
                    format: '<b>{point.name}</b>: {point.percentage:.1f} %'
                }
            }
        },
        series: [{
            type: 'pie',
            name: 'Số lượng',
            data: [
                ['Tốt',   70.0],
                ['Sủa chữa',       30.0],
                ['Thanh lí',    00]
            ]
        }]
    });
 function Phong(data){
    this.id = data.id;
    this.Ten = data.TenPhongg;
};
function DsLoai(data){
    this.id = data.id;
    this.Ten = data.TenLoai;
    this.SoLuong = data.SoLuong;
};
function CtPhong(data){
    this.TenTS = data.TenTS;
    this.Ngay = data.Ngay;
    this.TinhTrang = data.TinhTrang;
    this.SoLuong = data.SoLuong;
};
function ViewModel(){
    var self = this;
    self.Phongs = ko.observableArray();
    self.PhongChon = ko.observable();
    self.idChon = ko.observable(1);
    self.tenChon = ko.observable();
    self.Quanli = ko.observable();
    //    Lọc
    self.DsLoais = ko.observableArray();
    self.LoaiChon = ko.observable();
    self.TinhTrangs = ko.observableArray(["Tất cả", "Tốt", "Đang sửa", "Thanh lí"]);
    self.TTChon = ko.observable('');
    //    bảng chi tiết
    self.CtPhongs = ko.observableArray();
    self.CtLocs = ko.observableArray();

    self.FeedChart = function(){
        //Chart Danh sach loai
        var dsp = [], j=0;
        SoLuongSD = 0;
        ko.utils.arrayForEach(this.DsLoais(), function(item) {
            var value = parseFloat(item.SoLuong);
            SoLuongSD += value;
        });
        for (var i=0; i < self.DsLoais().length; i++){
            if (self.DsLoais()[i].SoLuong != 0){
                dsp[j] = [self.DsLoais()[i].Ten, self.DsLoais()[i].SoLuong*100/SoLuongSD];
                j++;
            }
        }
        var chart1 = $("#Chart1").highcharts();
        chart1.series[0].setData(dsp,true);
        // Chart tinh trang
        var dstt = [
            ["Tốt", self.Tots()*100/SoLuongSD],
            ["Đang sửa", self.Suas()*100/SoLuongSD],
            ["Thanh lí", self.ThanhLis()*100/SoLuongSD],
        ];
        var chart2 = $("#Chart2").highcharts();
        chart2.series[0].setData(dstt,true);
    };
    self.Show = function(){
        $("#Content").show()
        self.idChon(self.PhongChon().id)
        self.tenChon(self.PhongChon().Ten)
        $.getJSON("getDSLoai.json?phongid=" + self.PhongChon().id, function(allData){
            var mappedLoai = $.map(allData, function(item){ return new DsLoai(item)});
            self.DsLoais(mappedLoai);
            self.FeedData();
        });
        $.getJSON("getQuanli.json?pid=" + self.PhongChon().id, function(allData){
            self.Quanli(allData.TenNV);
        })
    };
    self.Tots = ko.computed(function(){
        var total = 0;
        ko.utils.arrayForEach(this.CtPhongs(), function(item) {
            var value = parseFloat(item.SoLuong);
            if (item.TinhTrang == "Tốt") {
                total += value;
            }
        });
        return total;
    }, this);
    self.Suas = ko.computed(function(){
        var total = 0;
        ko.utils.arrayForEach(this.CtPhongs(), function(item) {
            var value = parseFloat(item.SoLuong);
            if (item.TinhTrang == "Đang Sửa") {
                total += value;
            }
        });
        return total;
    }, this);
    self.ThanhLis = ko.computed(function(){
        var total = 0;
        ko.utils.arrayForEach(this.CtPhongs(), function(item) {
            var value = parseFloat(item.SoLuong);
            if (item.TinhTrang == "Thanh Lý") {
                total += value;
            }
        });
        return total;
    }, this);
    self.TongCong = ko.computed(function(){
        var total = 0;
        ko.utils.arrayForEach(this.CtPhongs(), function(item) {
            var value = parseFloat(item.SoLuong);
            total += value;
        });
        return total;
    }, this);
    self.FeedData = function(){
        $("#CtPhongs").show()
        $("#CtLoc").hide()
        $.getJSON("getCtPhong.json?phongid=" + self.PhongChon().id, function(allData){
            var mappedCts = $.map(allData, function(item){ return new CtPhong(item)});
            self.CtPhongs(mappedCts);
            self.FeedChart();
        })
    };
    self.Sort = function(){
        if (self.TTChon() == "Tất cả")
        {
            $.getJSON("getCtPhong.json?phongid=" + self.PhongChon().id + "&&loaiid=" + self.LoaiChon().id,
                function(allData){
                    var mappedCTs = $.map(allData, function(item){ return new CtPhong(item)});
                    self.CtLocs(mappedCTs);
                    console.info(self.CtLocs().length);

                })
        }
        else
        {
            $.getJSON("getCtPhong.json?phongid=" + self.PhongChon().id + "&&loaiid=" + self.LoaiChon().id + "&&tinhtrang=" + self.TTChon(),
                function(allData){
                    var mappedCTs = $.map(allData, function(item){ return new CtPhong(item)});
                    self.CtLocs(mappedCTs);
                })
        };
        $("#CtPhongs").hide();
        $("#CtLoc").show()
    };
    $.getJSON('getPhong.json', function (allData) {
        var mappedPhongs = $.map(allData, function (item) { return new Phong(item) });
        self.Phongs(mappedPhongs);
    });
};
    ko.applyBindings(new ViewModel());
    $("#Content").hide();
    $("#BDTK1").hide();
    $("#BDTK2").hide();
    $("#Xem_BDTK1").click(function(){
        $("#BDTK1").show('slide', {direction: "right"},500);
//        $("#BDTK1").parent().css({"height":"350px"});
        $("#BTK1").hide('slide', {direction: "left"},500);
    })
    $("#Xem_BTK1").click(function(){
        $("#BTK1").show('slide', {direction: "left"},500);
        $("#BDTK1").hide('slide', {direction: "right"},500);
    })
    $("#Xem_BDTK2").click(function(){
        $("#BDTK2").show('slide', {direction: "right"},500);
        $("#BTK2").hide('slide', {direction: "left"},500);
    })
    $("#Xem_BTK2").click(function(){
        $("#BTK2").show('slide', {direction: "left"},500);
        $("#BDTK2").hide('slide', {direction: "right"},500);
    })
});